@charset 'UTF-8';
@import './common.scss';
@import '../fonts/iconfont.css';

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

.web{
	header{
		position: absolute;
		width: 100vw;
		top: 0;
		left: 0;
		background-color: #FFFFFF;
		.boxT{
			width: 93vw;
			height: 8vw;
			margin: 6vw auto;
			display: flex;
			justify-content: space-between;
			.leftBox{
				button{
					width: 23vw;
					font-size: 4.5vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 6vw;
					letter-spacing: 0vw;
					color: #000000;
					border-radius: 10vw;
					border: 1px solid #FF9344;
					padding: 1.5vw 3.3vw;
					background-color: #FFFFFF;
				}
			}
			.centerBox{
				span{
					font-size: 4vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 11vw;
					letter-spacing: 0vw;
					color: #000000;
					
				}
			}
			.cityBox{
				position: relative;
				i{
					position: absolute;
					color: #FF9344;
					font-size: 4vw;
					right: 1.5vw;
					top: 2.8vw;
					
				}
				select{
					margin-top: 1.5vw;
					width: 21vw;
					height: 7vw;
					border: 1px solid #FF9344;
					padding-left: 2vw;
					appearance:none; /*去掉下拉箭头*/
					outline: none;
					option{
						font-size: 3vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #000000;
					}
				}
				select::-ms-expand { display: none; }
			}
		}
		.boxB{
			.swiper{
				margin: 0 auto;
				width: 93vw;
				height: 32vw;
				--swiper-theme-color: #ff6600;
				.swiper-wrapper{
					.swiper-slide{
						display: flex;
						justify-content: space-between;
						.navBox{
							text-align: center;
							width: 20vw;
							.imgBox{
								width: 20vw;
								height: 20vw;
								img{
									width: 100%;
								}
							}
								
							h2{
								font-size: 3vw;
								font-weight: normal;
								font-stretch: normal;
								line-height: 6vw;
								letter-spacing: 0vw;
								color: #000000;
							}
						}
					}
				}
				.swiper-pagination{
					bottom: 0.8vw;
					
				}
			}
		}
	}
	
	main{
		position: absolute;
		width: 100vw;
		top: 52vw;
		bottom: 18vw;
		overflow: auto;
		section{
			width: 93vw;
			height: 29.5vw;
			margin: 0 auto;
			margin-bottom: 8vw;
			.title{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 17.3vw;
					i{
						
					}
					h2{
						font-size: 4vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 6vw;
						letter-spacing: 0vw;
						color: #000000;
					}
				}
				.right{
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 11vw;
					h2{
						font-size: 3vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 7vw;
						letter-spacing: 0vw;
						color: #000000;
					}
					i{
						font-size: 3vw;
						color: #FF9344;
					}
				}
			}
			.content{
				width: 100%;
				margin-top: 6vw;
				display: flex;
				justify-content: space-between;
				a{
					display: block;
					width: 18vw;
					height: 18vw;
					img{
						width: 100%;
					}
				}
			}
		}
	}
}

// 适配
@media screen and (min-width:768px) and (max-width:1024px) {
	.web{
		header{
			.boxT{
				.cityBox{
					select{
						font-size: 3.2vw;
					}
				}
			}
			.boxB{
				.swiper{
					.swiper-wrapper{
						.swiper-slide{
							.navBox{
								h2{
									
									font-size: 3.6vw;
								}
							}
						}
					}
				}
			}
		}
		main{
			.left{
				i{
					font-size: 5vw;
				}
			}
			section{
				.title{
					.right{
						h2{
							font-size: 3.3vw;
						}
						i{
							font-size: 3.3vw;
						}
					}
				}
			}
		}
	}
	
}